<template>
  <div id="body">
    <div id="saizhi">
      <div class="htitle">
        <strong>球队介绍</strong>
      </div>
    </div>

    <div class="nav_select_bottom"></div>
    <div class="data" id="mainTitle">
      <table
        class="tdlink"
        cellspacing="0"
        cellpadding="2"
        width="100%"
        bgcolor="#ffffff"
        border="1"
      >
        <tbody>
          <tr>
            <td align="center" width="155" bgcolor="#ffffff" rowspan="5">
              <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tbody>
                  <tr style="background: white">
                    <td align="center">
                      <img
                        height="89"
                        :src="teamtabledata.teamImg"
                        width="88"
                        alt=""
                      />
                    </td>
                  </tr>
                  <tr>
                    <td align="center" height="20">
                      {{ teamtabledata.teamName }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td align="right" width="74" bgcolor="#eff4fa" height="20">
              <span class="STYLE13">球队名称：</span>
            </td>
            <td width="174" bgcolor="#fbfbfb">
              <span class="STYLE13"
                ><strong>{{ teamtabledata.teamName }}</strong></span
              >
              <span
                id="userEditBtn"
                style="float: right"
                class="editBtn"
                onclick="UserEdit(82)"
              ></span>
            </td>
            <td class="STYLE13" align="right" width="67" bgcolor="#eff4fa">
              球队主场：
            </td>
            <td width="136" bgcolor="#fbfbfb">
              <strong>{{ teamtabledata.teamHome }}</strong>
            </td>
          </tr>
          <tr>
            <td align="right" bgcolor="#eff4fa" height="20">
              <span class="STYLE13">成立时间：</span>
            </td>
            <td bgcolor="#fbfbfb">
              <span class="STYLE13"
                ><strong>{{ teamtabledata.teamCreate }}</strong></span
              >
            </td>
            <td align="right" bgcolor="#eff4fa">
              <span class="STYLE13">主教练：</span>
            </td>
            <td bgcolor="#fbfbfb">
              <span class="STYLE13"
                ><strong>{{ teamtabledata.teamCoach }}</strong></span
              >
            </td>
          </tr>
          <tr>
            <td align="right" bgcolor="#eff4fa" height="20">参加的联赛：</td>
            <td colspan="3" bgcolor="#fbfbfb">
              <strong v-for="item in teamtabledata.leagueList" :key="item.id"
                >{{ item.leagueName }} &nbsp;</strong
              >
            </td>
          </tr>
        </tbody>
      </table>

      <div id="saizhi">
        <div class="htitle">
          <strong>球队能力</strong>
        </div>
      </div>

      <div id="exhibitor114" style="float:inherit" > 
        <div id="exhibitorleft" ref="chart">
        </div>

        <div id="exhibitorright" v-if="teamtabledata.teamAbility" style="background-color:white">
          <div style="font-size:20px;font-weight: 500;">擅长阵型：</div>
          <div  style="text-align:center" v-if="teamtabledata.teamAbility">
             <img title="formation" :src="teamtabledata.teamAbility.formation" style="display:inline-block;vertical-align: middle;" width="200" height="270">
          </div>
          <div v-else>无图片</div>           
        </div> 
      </div> 


      <div id="saizhi">
        <div class="htitle">
          <strong>数据统计</strong>
        </div>
      </div>
      <div style="background-color:white">
      <el-select
        v-model="homeAway"
        clearable
        placeholder="主客场"
        style="width: 100px; margin-right: 10px"
      >
        <el-option value="全部" label="全部"></el-option>
        <el-option value="主场" label="主场"></el-option>
        <el-option value="客场" label="客场"></el-option>
      </el-select>

      <el-select
        v-model="leagueId"
        clearable
        placeholder="联赛"
        style="width: 200px; margin-right: 10px"
      >
        <el-option
          v-for="item in teamtabledata.leagueList"
          :key="item.id"
          :label="item.leagueName"
          :value="item.id"
        >
          {{ item.leagueName }}
        </el-option>
      </el-select>

      <el-button class="ml-5" icon="el-icon-search" circle @click="searchdata"
        >查询</el-button
      >
      <el-button icon="el-icon-remove" circle @click="reset">重置</el-button>
    </div>
      <el-table
        :data="teamdatatabledata"
        border
        stripe
        :header-cell-class-name="'headerBg'"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="totalRounds" label="赛"></el-table-column>
        <el-table-column prop="totalWin" label="胜"></el-table-column>
        <el-table-column prop="totalFlatten" label="平"></el-table-column>
        <el-table-column prop="totalLose" label="负"></el-table-column>
        <el-table-column prop="totalGoal" label="进球"></el-table-column>
        <el-table-column prop="totalFumble" label="失球"></el-table-column>
        <el-table-column prop="totalFoul" label="犯规"></el-table-column>
        <el-table-column prop="totalYcard" label="黄牌"></el-table-column>
        <el-table-column prop="totalRcard" label="红牌"></el-table-column>
        <el-table-column prop="totalControl" label="控球率">
          <template slot-scope="scope">
            <div v-if="scope.row.totalControl">
              {{ scope.row.totalControl }}%
            </div>
          </template>
        </el-table-column>
        <el-table-column label="射门（射正）">
          <template slot-scope="scope">
            <div v-if="scope.row.totalShoot">
              {{ scope.row.totalShoot }}({{ scope.row.totalOntarget }})
            </div>
          </template>
        </el-table-column>
        <el-table-column label="传球（成功传球）">
          <template slot-scope="scope">
            <div v-if="scope.row.totalPass">
              {{ scope.row.totalPass }}({{ scope.row.totalOkpass }})
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="totalSurpass" label="过人数"></el-table-column>
      </el-table>

      <el-table
        :data="teamdatatabledata"
        border
        stripe
        :header-cell-class-name="'headerBg'"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="averageGoal" label="场均进球"></el-table-column>
        <el-table-column prop="averageFumble" label="场均失球"></el-table-column>
        <el-table-column prop="averageSurpass" label="场均过人"></el-table-column>
        <el-table-column prop="averageOffside" label="场均越位"></el-table-column>
        <el-table-column prop="averageFoul" label="场均犯规"></el-table-column>
        <el-table-column prop="averageYcard" label="场均黄牌"></el-table-column>
        <el-table-column prop="averageRcard" label="场均红牌"></el-table-column>
        <el-table-column prop="totalControl" label="控球率">
          <template slot-scope="scope">
            <div v-if="scope.row.totalControl">
              {{ scope.row.totalControl }}%
            </div>
          </template>
        </el-table-column>
        <el-table-column label="场均射门（射正）">
          <template slot-scope="scope">
            <div v-if="scope.row.averageShoot">
              {{ scope.row.averageShoot }}({{ scope.row.averageOntarget }})
            </div>
          </template>
        </el-table-column>
        <el-table-column label="场均传球（成功传球）">
          <template slot-scope="scope">
            <div v-if="scope.row.averagePass">
              {{ scope.row.averagePass }}({{ scope.row.averageOkpass }})
            </div>
          </template>
        </el-table-column>
      </el-table>


      <div id="saizhi">
        <div class="htitle">
          <strong>球队赛程</strong>
        </div>
      </div>

      <el-table
        :data="teamgametabledata"
        border
        stripe
        :header-cell-class-name="'headerBg'"
        @selection-change="handleSelectionChange"
        @row-click="GameDetails"
      >
        <el-table-column label="联赛">
          <template slot-scope="scope">
            <div v-if="scope.row.league">
              {{ scope.row.league.leagueName }}第{{ scope.row.gameRounds }}轮
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gameTime" label="时间"></el-table-column>
        <el-table-column
          prop="hometeaminfo.teamName"
          label="主队"
        >
        
      </el-table-column>
        <el-table-column label="比分">
          <template slot-scope="scope" >
            <div v-if="scope.row.gameData" :class="winorlose(scope.row)">
              {{ scope.row.gameData.homeGoal }}-{{
                scope.row.gameData.awayGoal
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="awayteaminfo.teamName"
          label="客队"
        >
        
      </el-table-column>
        <el-table-column
          prop="teamDataSingle.singleFoul"
          label="犯规"
        ></el-table-column>
        <el-table-column
          prop="teamDataSingle.singleYcard"
          label="黄牌"
        ></el-table-column>
        <el-table-column
          prop="teamDataSingle.singleRcard"
          label="红牌"
        ></el-table-column>
        <el-table-column
          prop="teamDataSingle.singleControl"
          label="控球率"
        >
        <template slot-scope="scope">
            <div v-if="scope.row.teamDataSingle">
              {{ scope.row.teamDataSingle.singleControl }}%
            </div>
          </template>
      </el-table-column>
        <el-table-column label="射门(射正)">
          <template slot-scope="scope">
            <div v-if="scope.row.teamDataSingle">
              {{ scope.row.teamDataSingle.singleShoot }}({{
                scope.row.teamDataSingle.singleOntarget
              }})
            </div>
          </template>
        </el-table-column>
        <el-table-column label="传球(成功)">
          <template slot-scope="scope">
            <div v-if="scope.row.teamDataSingle">
              {{ scope.row.teamDataSingle.singlePass }}({{
                scope.row.teamDataSingle.singleOkpass
              }})
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="teamDataSingle.singleSurpass"
          label="过人数"
        ></el-table-column>
      </el-table>

      <div id="saizhi">
        <div class="htitle">
          <strong>赛程数据变化</strong>
        </div>
      </div>

      <div id="linechart" ref="linechart">
        
      </div>
      <div id="chartall">
      <div id="chartleft" ref="linechart1"></div>
      <div id="chartright" ref="linechart2"></div>
      </div>
      <div id="saizhi">
        <div class="htitle">
          <strong>球队阵容</strong>
        </div>
      </div>
      <el-table
        :data="teamtabledata.players"
        border
        stripe
        :header-cell-class-name="'headerBg'"
        @selection-change="handleSelectionChange"
        @row-click="PlayerDetails"
      >
        ​​​​​​​<el-table-column
          prop="playerNumber"
          label="号码"
        ></el-table-column>
        <el-table-column prop="playerPosition" label="位置"></el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <a class="testA" target="_blank" @click="PlayerDetail(scope.row.id)">
              {{ scope.row.playerName }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="playerAge" label="年龄"></el-table-column>
        <el-table-column label="身高">
          <template slot-scope="scope">
            <div v-if="scope.row.playerHeight">
              {{ scope.row.playerHeight }}cm
            </div>
          </template>
        </el-table-column>
        <el-table-column label="体重">
          <template slot-scope="scope">
            <div v-if="scope.row.playerWeight">
              {{ scope.row.playerWeight }}kg
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="playerNation" label="国籍"></el-table-column>
        <el-table-column label="身价">
          <template slot-scope="scope">
            <div v-if="scope.row.playerValue">
              {{ scope.row.playerValue }}万欧元
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div id="saizhi">
        <div class="htitle">
          <strong>球队简介</strong>
        </div>
      </div>

      <div id="sclassRule">
        <el-form size="small" :disabled="true">
          <el-form-item>
            <el-input
              type="textarea"
              v-if="teamtabledata.teamProfile"
              v-model="teamtabledata.teamProfile"
              style="width: 100%; min-height: 80px; margin-left: 0"
              autosize
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "TeamDetail",
  data() {
    return {
      teamId: "", //球队id
      leagueId: "", //联赛id
      homeAway: "", //主客场
      teamtabledata: [], //球队详细信息 包括球队能力 球队阵容
      teamdatatabledata: [], //球队赛季数据信息
      teamgametabledata: [], //球队赛程信息 包括单场比赛详细数据
    };
  },
  computed:{
    winorlose(){
      return function(data){
      if(data.gameData.homeGoal>data.gameData.awayGoal){
        return "win";
      }else if(data.gameData.homeGoal==data.gameData.awayGoal){
        return "flatten";
      }else{
        return "lose";
      }
      }
    }
  },
  created(){
    this.teamId = this.$route.query.id;
    this.load();
   
    console.log(this.teamId);
    console.log(this.$route);
    
    this.searchdata();
    this.linechart();
  },
  mounted() {
    

    //var chartDom = document.getElementById("exhibitorleft");
    //var myChart = echarts.init(this.$refs.chart);
    const seriesLabel = {
      show: true
    };
    var option = {
      title: {
        text: '球队能力值'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: [ '防守能力','进攻能力','综合能力']
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],
          label: seriesLabel
        },
      ]
    };
    this.request.get("/echarts/front/teamAbility",{
      params:{
        teamId:this.teamId
      }
    }).then(res=>{
      option.series[0].data=res.data.count;
      this.$nextTick(() => {
        var myChart = echarts.init(this.$refs.chart);
        myChart.setOption(option)
      })
    })
  },
  methods: {
    load() {
      //获取球队详细信息
      this.request.get("/team/front/getteambyid", {
          params: {
            teamId: this.teamId,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.teamtabledata = res.data;
          console.log(this.teamtabledata);
        });
    },
    searchdata() {
      //获取球队赛季数据信息
      this.request.get("/team/front/getteamdata",{
        params:{
          teamId:this.teamId,
          leagueId:this.leagueId,
          homeAway:this.homeAway
        }
      }).then(res=>{
        console.log(res.data)
        this.teamdatatabledata=[]
        if(res.data!=null){
          this.teamdatatabledata.push(res.data)
        }
        console.log(this.teamdatatabledata)
      }),


      //获取球队赛程信息
      this.request
        .get("/team/front/getteamgame", {
          params: {
            teamId: this.teamId,
            leagueId: this.leagueId,
            homeAway: this.homeAway,
          },
        })
        .then((res) => {
          console.log(11111111111111111 + res.data);
          this.teamgametabledata = res.data;
          console.log(22222222222222222 + this.teamgametabledata);
        });

        this.linechart()
    },
    //球队赛程数据变化折线图
    linechart(){

      var teamoption = {
        title:{
          text:'数据变化'
        },
        tooltip:{
              trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
              axisPointer: {// 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
                interval:0,//代表显示所有x轴标签显示
            }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '进球',
            data: [],
            type: 'line',
          },
          {
            name: '失球',
            data: [],
            type: 'line',
          },
          {
            name: '射门',
            data: [],
            type: 'line'
          },
          {
            name: '射正',
            data: [],
            type: 'line'
          },
          {
            name: '过人',
            data: [],
            type: 'line'
          },
          {
            name: '越位',
            data: [],
            type: 'line'
          },
          {
            name: '犯规',
            data: [],
            type: 'line'
          },
          {
            name: '黄牌',
            data: [],
            type: 'line'
          },
          {
            name: '红牌',
            data: [],
            type: 'line'
          },
        ]
      };
      

      var teamoption1 = {
        title:{
          text:'控球率变化'
        },
        tooltip:{
              trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
              axisPointer: {// 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
                interval:0,//代表显示所有x轴标签显示
            }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '控球率',
            data: [],
            type: 'line',
            label:{
              show:true,
              position:'bottom',
              textstyle:{
                fontSize:8
              }
            },
          }
          
        ]
      };

      var teamoption2 = {
        title:{
          text:'传球变化'
        },
        tooltip:{
              trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
              axisPointer: {// 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
                interval:0,//代表显示所有x轴标签显示
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '传球',
            data: [],
            type: 'line',
            label:{
              show:true,
              position:'bottom',
              textstyle:{
                fontSize:8
              }
            }
          },
          { 
            name: '成功传球',
            data: [],
            type: 'line',
            label:{
              show:true,
              position:'bottom',
              textstyle:{
                fontSize:8
              }
            }
          },
         
        ]
      };
      this.request.get("/echarts/front/getteamgamechange",{
        params:{
          teamId:this.teamId,
          leagueId:this.leagueId
        }
      }).then(res=>{
        console.log("222222222222222222222224444444444444444444444444")
        console.log(res.data)
        teamoption.xAxis.data=res.data.map(item=>item.league.leagueName+"第"+item.game.gameRounds+"轮")
        teamoption1.xAxis.data=res.data.map(item=>item.league.leagueName+"第"+item.game.gameRounds+"轮")
        teamoption2.xAxis.data=res.data.map(item=>item.league.leagueName+"第"+item.game.gameRounds+"轮")
        teamoption.series[0].data=res.data.map(item=>item.singleGoal)
        teamoption.series[1].data=res.data.map(item=>item.singleFumble)
        teamoption.series[2].data=res.data.map(item=>item.singleShoot)
        teamoption.series[3].data=res.data.map(item=>item.singleOntarget)
        teamoption.series[4].data=res.data.map(item=>item.singleSurpass)
        teamoption.series[5].data=res.data.map(item=>item.singleOffside)
        teamoption.series[6].data=res.data.map(item=>item.singleFoul)
        teamoption.series[7].data=res.data.map(item=>item.singleYcard)
        teamoption.series[8].data=res.data.map(item=>item.singleRcard)
        teamoption1.series[0].data=res.data.map(item=>item.singleControl)
        teamoption2.series[0].data=res.data.map(item=>item.singlePass)
        teamoption2.series[1].data=res.data.map(item=>item.singleOkpass)
        this.$nextTick(() => {
        var chartName = echarts.init(this.$refs.linechart);
        chartName.setOption(teamoption)

        var chartName1 = echarts.init(this.$refs.linechart1);
        chartName1.setOption(teamoption1)

        var chartName2 = echarts.init(this.$refs.linechart2);
        chartName2.setOption(teamoption2)

      })
      })
    },
    reset() {
      this.leagueId = "";
      this.homeAway = "";
      this.load();
      this.searchdata();
    },
    //分页每页大小
    handleSizeChange(size) {
      console.log(size);
      this.size = size;
      this.load();
    },

    //分页第几页
    handleCurrentChange(current) {
      console.log(current);
      this.current = current;
      this.load();
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    PlayerDetail(id) {
       this.$router.push({
          path: '/front/playerdetail',
          query: {
            id: id
          }
        })
    },
    GameDetails(row,event,column){
      console.log(row, event, column)
      console.log(row.id)
      this.$router.push({
          path: '/front/GameDetail',
          query: {
            id: row.id
          }
        })
    },
    PlayerDetails(row,event,column){
      console.log(row, event, column)
      console.log(row.id)
      this.$router.push({
          path: '/front/playerdetail',
          query: {
            id: row.id
          }
        })
    },
    //球队路由跳转
    TeamDetail(id) {
       this.$router.push({
          path: '/front/teamdetail',
          query: {
            id: id
          }
        })
    },
  },
};
</script>

<style>
#saizhi {
  border: 1px solid #e5e5e5;
  margin-top: 8px;
  clear: both;
}
.htitle {
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  background-color: #f0f0f0;
  position: relative;
}
.sclassRule {
  line-height: 100px;
  padding: 15px;
}
#exhibitor114{ 
  margin:0 auto;
  width:100%;
  height:300px
} 
#exhibitorleft{ 
  float:left;
  width:60%; 
  height:100%; 
  background:#eeeeee;
  border: 1px solid #e5e5e5;
} 
#exhibitorright{ 
  float:right; 
  width:40%;
  height:100%;
  border: 1px solid #e5e5e5;
} 
.testA{
  color: #005eb8;
}
.testA:hover{
  cursor: pointer;
}
#linechart{
  height:400px ;
  background: white;
}
#chartall{ 
  margin:0 auto;
  width:100%;
  height:300px
} 
#chartleft{ 
  float:left;
  width:50%; 
  height:100%; 
  background:white;
  border: 1px solid #e5e5e5;
} 
#chartright{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
  background: white;
} 
.win{
  font-size: 20px;
  color:green;
}
.flatten{
  font-size: 20px;
  color:#005eb8;
}
.lose{
  font-size: 20px;
  color:red
}
.testA{
  color: #005eb8;
}
.testA:hover{
  cursor: pointer;
}
</style>